<template>
  <div ref="chartContainer" style="width: 348px; height: 200px"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";

// 接收外部传入的数据
const props = defineProps({
  categories: {
    type: Array,
    required: true,
    default: () => ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  },
  digitizedCounts: {
    type: Array,
    required: true,
    default: () => [100, 200, 30, 110, 100, 120, 120],
  },
  undigitizedCounts: {
    type: Array,
    required: true,
    default: () => [100, 200, 30, 110, 100, 120, 120],
  },
  totalCount: {
    type: Number,
    required: true,
    default: () => 1000,
  },
  digitizationRate: {
    type: Number,
    required: true,
    default: () => 80,
  },
});

const chartContainer = ref(null);
let chartInstance = null;
const zoomData = [  // 有滚动条 平移
  {
    type: 'slider',
    realtime: true,
    start: 0,
    end: 40,  // 初始展示40%
    height: 4,
    fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
    borderColor: "rgba(17, 100, 210, 0.12)",
    handleSize: 0, // 两边手柄尺寸
    showDetail: false, // 拖拽时是否展示滚动条两侧的文字
    top: '70%',

    // zoomLock:true, // 是否只平移不缩放
    // moveOnMouseMove:true, //鼠标移动能触发数据窗口平移
    // zoomOnMouseWheel :true, //鼠标移动能触发数据窗口缩放
  },
  {
    type: "inside",  // 支持内部鼠标滚动平移
    start: 0,
    end: 40,
    zoomOnMouseWheel: false,  // 关闭滚轮缩放
    moveOnMouseWheel: true, // 开启滚轮平移
    moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
  }
]
const initChart = () => {
  if (chartContainer.value) {
    chartInstance = echarts.init(chartContainer.value);
    const option = {
      // 图表标题等全局设置
      title: {
        text: '', // 可添加图表标题
        left: 'center'
      },
      // 提示框配置，鼠标悬停时显示数据信息
      tooltip: {
        trigger: 'axis'
      },
      // 图例配置，显示折线对应的名称
      legend: {
        data: ['接口订阅量'],
        textStyle: {
          color: "#fff",
        },
      },
      // x轴配置
      xAxis: {
        type: 'category',
        data: props.categories,
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          color: "#fff",
        },
      },
      // y轴配置
      yAxis: {
        type: 'value',
        name: '单位: 个',
        min: 0,
        boundaryGap: [0, 0.05],
        nameTextStyle: {
          color: "#fff",
        },
        axisLabel: {
          textStyle: {
            color: '#fff',//字体颜色
          }
        },
      },
      // 系列配置，定义折线相关属性
      series: [
        {
          name: '接口订阅量',
          type: 'line',
          data: props.undigitizedCounts, // 对应数据，按需修改
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: {
            color: '#409EFF' // 折线颜色
          },
          itemStyle: {
            color: '#409EFF' // 节点颜色
          }
        },
      ],
      dataZoom: zoomData
    };
    chartInstance.setOption(option);
  }
};

onMounted(() => {
  console.log(2);
  
  setTimeout(() => {
    console.log(3);
    
    initChart();
  }, 500);
});

onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
});
</script>

<style scoped>
/* 可添加额外样式 */
</style>
